<template>
  <div class="design-container">
    <design-header></design-header>
    <div class="design-main">
      <design-aside></design-aside>
      <design-canvas></design-canvas>
      <design-panel></design-panel>
    </div>
  </div>
</template>

<script>
import {
  DesignHeader,
  DesignAside,
  DesignCanvas,
  DesignPanel
} from './components'
export default {
  name: 'design',
  components: {
    DesignHeader,
    DesignAside,
    DesignCanvas,
    DesignPanel
  },
  data () {
    return {}
  },
  created () {
    document.body.classList.add('design')
  },
  beforeDestroy () {
    document.body.classList.remove('design')
  }
}
</script>

<style lang="less">
@import "./assets/style/font.css";
// 字体选择, elementUI渲染到了根节点下, 所以需要写到全局
.design {
  .design-container {
    display: flex;
    height: 100vh;
    flex-direction: column;
    font-size: 13px;
    & ::v-deep ul,
    & ::v-deep li {
      margin: 0; 
      padding: 0; 
      list-style: none;
    }
  }
  .design-main {
    display: flex; flex: 1; overflow: hidden;
  }
  .popper-font-family {
    .el-select-dropdown__item {
      color: #000; padding: 5px 10px;
      span {
        display: block;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        overflow: hidden;
        text-indent: -88em;
      }
    }
  }
  // 字体间距滑块
  .popper-panel-row {
    padding: 0; color: #000;
    ul,li,dl,dt,dd{ margin: 0; padding: 0; list-style: none;}
    dl{
      display: flex; align-items: center; flex: 1;
      dt{ padding: 0 10px; min-width: 5em; text-align: right;}
      dd{ flex: 1;}
    }
    .slider{ padding-right: 10px;}
  }
  .color-picker-button-hidden {
    .el-color-dropdown__btns {
      .el-button {
        display: none;
      }
    }
  }
}
</style>